import { Kwidget } from "../kWidget";
import "../kIcon/index";
export class Kinput extends Kwidget {
  options = {};
  constructor(options = { el: document.body }) {
    super();
    this.options = options;
    const shadowRoot = this.initShadow();
  }

  static get observedAttributes() {
    return ["value", "type", "placeholder"];
  }

  connectedCallback() {
    this.logInfo("k-input挂载成功");
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    // console.log(attrName, oldVal, newVal);
  }

  insertToElement(element) {
    let el = element ? element : this.options?.el;
    el && el instanceof HTMLElement ? "" : (el = document.body);
    el.appendChild(this);
  }

  get placeholder() {
    return this.getAttribute("placeholder") || "请输入...";
  }
  set placeholder(val) {
    this.setAttribute("placeholder", val);
  }

  // Event init
  registerEvent(evtType, callback) {
    const instance = this.shadowRoot.getElementById("k-input");
    instance.addEventListener(evtType, (event) => callback(event));
  }

  html() {
    return `
      <div class="k-input-main">
          <input id="k-input" class="k-input" type="text" placeholder="${this.placeholder}" />
          <k-icon name="search" size="20" color="#666" class="k-input-icon" ></k-icon>
      </div>`;
  }

  css() {
    return `
      .k-input-main {
          width: var(--k-input-width);
          position: relative;
          display: flex;
          }
          .k-input {
            width: var(--k-input-width);
            height: var(--k-input-height);
            line-height: var(--k-input-height);
            padding: 0 var(--k-padding-10);
            border: 1px solid var(--k-input-boder-color);
            border-radius: var(--k-radius);
            font-size: var(--k-font-size);
            letter-spacing: var(--k-letter-spacing);
            outline: none;
            background-color: transparent;
          }
          .k-input:focus {
            transition: outline 0.3s ease-in-out;
            outline: 1px solid var(--k-focus-boder-color-100);
          }
          .k-input-icon{
            /* height: 100%; */
            display: flex;
            align-items: center;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
          }
    `;
  }
}

Kwidget.defineCustomElement("k-input", Kinput);
